<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="header">
        <p class="h3">乐享生活</p>
        <p>乐 &nbsp;&nbsp;享&nbsp;&nbsp; 每&nbsp; 一&nbsp; 天</p>
      </div>

      <div class="form-wrapper">
        <cell-group inset id="p1" @input="changer">
          <field
            class="aa"
            type="text"
            v-model="username"
            label="账号(手机号):"
          />
          <field class="aa" v-model="password" type="password" label="密码：" />
          <field
            class="aa"
            v-model="password2"
            type="password"
            label="确认密码："
          />
        </cell-group>
        <Button @click="regHandle" class="btn" :color="btncor">
          注 　册
        </Button>
      </div>
      <router-link :to="{ name: 'Login' }"
        ><div class="msg">已有账户，立即登录</div></router-link
      >
      <div class="text-wrapper_4">
        <input type="checkbox" v-model="checked" />
        <span class="text_12" style="color: gray">已阅读并同意</span>

        <router-link :to="{ name: 'yonghuxieyi' }">
          <span class="text_13" style="color: blue">《用户协议》</span>
        </router-link>
        <span class="text_14">、</span>
        <router-link :to="{ name: 'yinsiquanxian' }">
          <span class="text_15" style="color: blue">《隐私政策》</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Field, CellGroup, Toast, Button } from 'vant'
import { useRouter } from 'vue-router'
import { regAPI } from '../services/auth'
import axios from 'axios'
const username = ref('')
const password = ref('')
const password2 = ref('')
const checked = ref(false)
const { replace } = useRouter()
const router = useRouter()
const a = getToken()
const btncor = ref('') //按钮颜色
const changer = () => {
  if (username.value || password.value) {
    btncor.value = 'linear-gradient(to right, #ba6fcb,#fbc2eb )'
  } else {
    btncor.value = 'gray'
  }
}
const regHandle = async () => {
  if (!checked.value) {
    Toast('请勾选同意协议')
    return
  }
  if (username.value && password.value && password2.value) {
    if (password.value == password2.value) {
      // 执行注册
      regAPI(`mobile=${username.value}&password=${password.value}`)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            Toast.success('注册成功')
            replace({
              name: 'Login'
            })
          } else {
            Toast.fail(res.msg)
          }
        })
        .catch((res) => {
          Toast.fail('请求出错了')
        })
    } else {
      Toast('两次输入的密码不一致')
    }
  } else {
    Toast('请输入内容')
  }
}
</script>
<style scoped>
.text-wrapper_4 {
  margin-top: 11px;
}
.container {
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
  background-color: rgba(255, 255, 255, 0.229);
  width: 358px;
  height: 500px;
  border-radius: 15px;
  padding: 0 20px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header {
  text-align: center;
}
.header .h3 {
  font-size: 50px;
  color: #fc8432;
  font-weight: Semibold;
  margin-bottom: 0;
  font-family: PingFangSC-Semibold;
}
.header p {
  font-size: 25px;
  color: #666666;
  margin-bottom: 20px;
}

.btn {
  font-size: 20px;
  color: blue;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  width: 100%;
  margin-top: 40px;
  border-radius: 18px;
  color: white;
  background-color: gray;
  /* background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); */
}
.msg {
  color: blue;
  text-align: center;
  line-height: 88px;
}
a {
  text-decoration-line: none;
  color: #abc1ee;
}
/* 0000 */
#p1 {
  width: 100%;
  height: 170px;
  margin: 0 auto;
}
#p1 .aa {
  margin: 10px auto;
}
</style>
